import PropTypes from 'prop-types'
import React, { memo, useCallback, useState } from 'react'
import SectionHomeV2Wrapper from './style'
import SectionHeader from '@/components/section-header'
import SectionTabs from '@/components/section-tabs'
import SectionRoom from '@/components/section-rooms'
import SectionFooter from '@/components/section-footer'

const SectionHomeV2 = memo((props) => {
  const {itemData} = props
  const tabsNames = itemData.dest_address?.map(item => item.name)
  const initialName = Object.keys(itemData?.dest_list)[0]
  const [name, setName] = useState(initialName)
  const tabClickHandle = useCallback((index,name) => {
    setName(name)
  },[])
  return (
    <SectionHomeV2Wrapper>
      <SectionHeader title={itemData.title} subtitle={itemData?.subtitle}/>
      <SectionTabs addressData={tabsNames} tabClick={tabClickHandle}/>
      <SectionRoom roomItem={itemData.dest_list?.[name]} homeWidth="33.33333%"/>
      <SectionFooter houseName={name}/>
    </SectionHomeV2Wrapper>
  )
})

SectionHomeV2.propTypes = {
  itemData: PropTypes.object
}

export default SectionHomeV2